import React from 'react';
import { Alert } from 'antd';

export interface StatusAlertItem {
  key: string;
  type: 'success' | 'info' | 'warning' | 'error';
  message: React.ReactNode;
  description?: React.ReactNode;
  showIcon?: boolean;
}

interface StatusAlertsProps {
  items: StatusAlertItem[];
  containerStyle?: React.CSSProperties;
  itemStyle?: React.CSSProperties;
}

const StatusAlerts: React.FC<StatusAlertsProps> = ({ items, containerStyle, itemStyle }) => {
  if (!items || items.length === 0) {
    return null;
  }

  return (
    <div style={containerStyle}>
      {items.map(({ key, showIcon = true, ...alertProps }) => (
        <Alert
          key={key}
          showIcon={showIcon}
          style={{ marginBottom: 16, ...itemStyle }}
          {...alertProps}
        />
      ))}
    </div>
  );
};

export default StatusAlerts;
